<template>
  <div class="login">
    <el-card class="login_card">
      <el-image class="logo_image" :src="logo_url" fit="cover"></el-image>
      <p class="login_title">登 录</p>
      <p class="login_desc">欢迎登录知否课堂后台管理系统</p>
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入管理员账号" prefix-icon="el-icon-user"/>
        </el-form-item>
        <el-form-item>
          <el-input type="password" placeholder="请输入管理员密码" prefix-icon="el-icon-lock"/>
        </el-form-item>
        <el-form-item>
          <el-button :loading="loginLoading" style="background: #5b89fe; color: white" @click="submitForm('ruleForm')">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- footer -->
    <p class="footer">Copyright © ZhiFou All Rights Reserved</p>
  </div>
</template>
<script>

export default {
  name: 'loginPage',
  props: {
    msg: String
  },
  setup() {
    let logo_url=require("@/assets/images/logo.png");
    let wechat_img=require("@/assets/images/wechat.png");
    let home_img= require("@/assets/images/home.png");
    let juejin_img=require("@/assets/images/juejin.jpg");
    let officalAccount_img=require("@/assets/images/officalAccount.jpg");
    return {
      logo_url,
      wechat_img,
      home_img,
      juejin_img,
      officalAccount_img,
    }
  }
}
</script>
<style>
.login {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/bg.jpg");
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100% 100%;
}
.login_card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20%;
  min-width: 300px;
  height: 500px;
  min-height: 500px;
  border-radius: 10px;
  text-align: center;
}
.logo_image {
  width: 50px;
  height: 50px;
  margin-top: 40px;
}
.login_title {
  font-size: 25px;
  font-weight: bold;
}
.login_desc {
  letter-spacing: 2px;
  color: #999a9a;
}
.el-button {
  width: 100%;
}
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  text-align: center;
  color: rgb(183, 181, 181);
}
.wechat_logo {
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 100px;
  right: 20px;
}
.home_logo {
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 40px;
  right: 20px;
}
.juejin_img,
.offical_img {
  width: 180px;
  height: 200px;
  border-radius: 10px;
  position: fixed;
  right: 80px;
  bottom: 20px;
  display: none;
}
.wechat_logo:hover,
.home_logo:hover {
  border-radius: 50%;
  box-shadow: 0 3px 15px 3px rgba(237, 229, 229, 0.5);
}
.wechat_logo:hover + .offical_img {
  display: block;
}
.home_logo:hover + .juejin_img {
  display: block;
}
.footer:hover {
  color: white;
}
</style>